<template>
	<view class="">
		<view class="p12 mb14 pb0" style="background: #FAFBFA;">
			<view class="u-f-item u-f-jsb mt25" @click="toPage('/user/index-info')">
				<view class="u-f-item">
					<u-avatar size="100" src=""></u-avatar>
					<view class="pl8">
						<view class="fz16 u-font-bold">咕噜咕噜咕噜</view>
						
					</view>
				</view>
				<view class="u-flex">
					<image src="../../static/image/ic-msg.png" class="w44 h44"></image>
				</view>
			</view>
			<view class="mt25">
				<u-tabs bg-color="#FAFBFA" bar-width="120" active-color="#70B52C" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		
			<view class="p12">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="toInfo(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">百搭休闲斜挎包百搭休闲斜挎包</view>
						<view class="u-flex u-f-jsb mt10">
							<view class="u-flex fz12 c9">
								<u-avatar class="mr5" size="42" src=""></u-avatar>
								咕噜咕噜
							</view>
							<view class="u-flex fz12 c9">
								<u-icon class="fz16 mr3" name="heart"></u-icon>
								2777
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="toInfo(item)" class="demo-warter pl6" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="pt12 pb20 u-flex u-f-jsb">
						<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">百搭休闲斜挎包百搭休闲斜挎包</view>
						<view class="tmp-btn fz12 u-font-bold">使用模板</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>

		<u-tabbar active-color="#70B52C" @change="tabbarChange" v-model="curTab" :list="tabbarList"
			:mid-button="true"></u-tabbar>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '我的分享'
				}, {
					name: '我的收藏'
				}],
				curTab: 1,
				current: 0,
				loadStatus: 'loadmore',
				flowList: [],
				list: [{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 784,
						title: '欲与天公试比高',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 7891,
						title: '须晴日，看红装素裹，分外妖娆',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 2341,
						shop: '李白杜甫白居易旗舰店',
						title: '江山如此多娇，引无数英雄竞折腰',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 661,
						shop: '李白杜甫白居易旗舰店',
						title: '惜秦皇汉武，略输文采',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
					},
					{
						price: 1654,
						title: '唐宗宋祖，稍逊风骚',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 1678,
						title: '一代天骄，成吉思汗',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ab7348dd722017831b2de2b3ac1ba608bfce2b9bd82bd29aa1c34a417a220422.png',
					},
					{
						price: 924,
						title: '只识弯弓射大雕',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
				]
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			toInfo() {
				uni.navigateTo({
					url: '/pages/community/info'
				})
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	.user-info {
		width: 232rpx;
		background: rgba(25, 41, 28, 0.05);
	}

	.module-search {
		flex: 1;
		background: rgba(25, 41, 28, 0.05);
	}
</style>